<template>
	<view class="container">
		<view class="login-box">
			<text class="login-title">用户登录</text>

			<input placeholder="请输入邮箱/手机号码/用户名" />

			<input placeholder="请输入密码" />

			<view style="font-size: 13px;width: 100%;font-weight: bold;color: #666666;">

				<checkbox value="cb" color="#F24F60" style="transform:scale(0.7);margin-left: -3px;" />记住登录状态

			</view>

			<view class="forgetAndRegist">
				<text>忘记密码</text>
				<text>立即注册</text>
			</view>

			<button class="login-btn">登录</button>


		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.forgetAndRegist {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 300px;
		margin-top: 25px;
	}

	.login-btn {
		line-height: 35px;
		font-size: 13px;
		margin-top: 30px;
		height: 35px;
		width: 300px;
		background-color: #F24F60;
		color: #FFFFFF;
		border-radius: 3px;
	}

	.container {
		font-size: 14px;
		height: 100vh;
		width: 100wh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-title {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 25px;
	}

	.checkbox {
		width: 13px;
		height: 13px;
	}

	.login-box input {
		padding-left: 5px;
		width: 300px;
		margin-bottom: 25px;
		height: 40px;
		border: 1px solid #dfdfdf;
		font-size: 14px;
	}

	.remember {
		font-weight: bold;
		width: 100%;
		margin-top: 6px;
		margin-left: 10px;
		color: #666;
		font-size: 14px;
	}
</style>
